<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			* {margin: 0;padding: 0;}
			li {list-style: none;}
			a {text-decoration: none;}
			input{/*input去掉选中后的蓝色外框线*/outline: none;}
			html,body{font-size: calc(100vw/7.5);position: relative;height: 100%;}
			 @font-face {
				  font-family: 'iconfont';
				  src: url('font/iconfont.eot');
				  src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
				      url('font/iconfont.woff2') format('woff2'),
				      url('font/iconfont.woff') format('woff'),
				      url('font/iconfont.ttf') format('truetype'),
				      url('font/iconfont.svg#iconfont') format('svg');
				}
				.iconfont {
				  font-family: "iconfont" !important;
				  font-size: 0.48rem;
				  font-style: normal;
				  -webkit-font-smoothing: antialiased;
				  -moz-osx-font-smoothing: grayscale;
				}
			.title{width:7.5rem;height:0.89rem;background: #387ec2;border-bottom: 0.01rem solid #b1b1b1;
			display: flex;justify-content: space-between;align-items: center;box-sizing: border-box;padding: 0 0.54rem;}
		    .title img{width: 1.64rem;height: 0.58rem;}
		    .title .pic1{width: 0.43rem;height:0.35rem;}
		    .banner{width:100%;height:3.14rem;}
		    .banner img{width:100%;height:3.14rem;}
		    .see{width:100%;height:0.64rem;line-height: 0.64rem;background: #f2f2f2;display: flex;}
		    .see span,.see a,.see img{display: block;}
		    .see img{width:0.26rem;height:0.3rem;}
		    .see a{color: #666666;font-size: 0.26rem;}
		    .see span:nth-child(1){display: flex;align-items: center;margin-left: 0.2rem;font-weight: bold;}
		    .see span:nth-child(1) img{margin-right: 0.12rem;}
		    .see span:nth-child(2){margin-left: 1.13rem;}
		    .see span:nth-child(3){margin-left: 0.84rem;}
		    .menu{width:100%;border-bottom:0.21rem solid #f2f2f2;}
		    .menu ul{width:100%;display: flex;flex-wrap: wrap;align-items: center;}
		    .menu ul li{width:25%;height:1.88rem;box-sizing: border-box;border-bottom: 0.01rem solid #efeff4;
		    border-right: 0.01rem solid #efeff4;text-align: center;font-size: 0.25rem;}
		    .menu ul li img{width:0.62rem;height: 0.61rem;margin-top: 0.43rem;margin-bottom: 0.14rem;}
		     .menu ul li a{color: black;}
		    .menu ul li:nth-child(4n){border-right:none;}
		    .news{width: 100%;height:0.74rem;display: flex;border-bottom: 0.02rem solid #efeff4;
		    align-items: center;justify-content: space-between;box-sizing: border-box;padding:0 0.2rem;}
		    .news span,.news a,.news img{display: block;}
		    .news span:nth-child(1){display: flex;align-items: center;}
		    .news img{width:0.26rem;height:0.3rem;margin-right:0.12rem;}
		    .news a{color:#666666;font-size: 0.26rem;}
            .news .t1,.see .t1{font-size: 0.3rem;color:#666666;}
            .main{width:100%;margin-bottom: 1.1rem;}
            .main ul{border-top: 0.01rem solid #e4e4e4;width: 100%;padding-left:0.3rem;box-sizing: border-box;}
            .main li{display: flex;border-bottom: 0.01rem solid #e4e4e4;padding:0.19rem 0rem 0.17rem 0.06rem;
               box-sizing: border-box;}
            .main li img{width:1.87rem;height:1.4rem;margin-right: 0.3rem;}
            .main li a{display: block;font-size:0.29rem;color: black;}
             .main li a p span{display: block;}
             .main li a p span:first-child{width:1.16rem;height:0.4rem;border:0.02rem solid #ec6844;border-radius:0.05rem;
               font-size: 0.2rem;color:#ec6844;text-align: center;line-height: 0.4rem;}
             .main li a p span:last-child{font-size:0.22rem;color:#8a8a8a;margin-left: 2.7rem;}
             .main li a p:last-child{display:flex;align-items: center;margin-top: 0.45rem;}
             .foot{width:100%;height:1.1rem;border-top:0.01rem solid #b2b2b2;position: fixed;bottom:0;background: linear-gradient(to bottom right,#e7e3dd,#f9f9f9);}
			.foot span{display: block;}
			.foot ul{display: flex;justify-content: space-between;}
			.foot ul li{text-align: center;width:25%;}
			.foot ul li span{margin-bottom:0.02rem;margin-top:0.14rem;}
			.foot a{font-size:0.19rem;color:#929292;}
			.foot ul li:first-child a{color:#387ec2;}
			.foot a:hover{color:#387ec2;}
		</style>
	</head>
	<body>
		<div class="boss">
			<div class="title">
				<span></span><img src="img/首页_03.jpg"/><img src="img/首页_06.jpg" class="pic1"/>
			</div>
			<div class="banner">
				<img src="img/首页_10.jpg"/>
			</div>
			<div class="see">
				<span><img src="img/首页_13.jpg"/><a href="" class="t1">学员必看:</a></span><span><a href="">退考须知</a></span><span><a href="">约考须知</a></span>
			</div>
			<div class="menu">
				<ul>
					<li>
						<a href="">
							<img src="img/首页_17.jpg"/>
							<p>企业发展</p>
						</a>
					</li>
					<li>
						<a href="">
							<img src="img/首页_19.jpg"/>
							<p>学车指南</p>
						</a>
					</li>
					<li>
						<a href="">
							<img src="img/首页_21.jpg"/>
							<p>班型介绍</p>
						</a>
					</li>
					<li>
						<a href="">
							<img src="img/首页_23.jpg"/>
							<p>报名中心</p>
						</a>
					</li>
					<li>
						<a href="">
							<img src="img/首页_17.jpg"/>
							<p>企业发展</p>
						</a>
					</li>
					<li>
						<a href="">
							<img src="img/首页_19.jpg"/>
							<p>学车指南</p>
						</a>
					</li>
					<li>
						<a href="">
							<img src="img/首页_21.jpg"/>
							<p>班型介绍</p>
						</a>
					</li>
					<li>
						<a href="">
							<img src="img/首页_23.jpg"/>
							<p>报名中心</p>
						</a>
					</li>
					<li>
						<a href="">
							<img src="img/首页_17.jpg"/>
							<p>企业发展</p>
						</a>
					</li>
					<li>
						<a href="">
							<img src="img/首页_19.jpg"/>
							<p>学车指南</p>
						</a>
					</li>
					<li>
						<a href="">
							<img src="img/首页_21.jpg"/>
							<p>班型介绍</p>
						</a>
					</li>
					<li>
						<a href="">
							<img src="img/首页_23.jpg"/>
							<p>报名中心</p>
						</a>
					</li>
				</ul>
			</div>
			<div class="news">
				<span ><img src="img/首页_30.jpg"/><a href="" class="t1">新闻资讯</a></span><span><a href="">查看更多</a></span>
			</div>
			<div class="main">
				<ul>
					<li>
					<img src="img/首页_34.jpg"/>
					<a href="">
						<p>海淘模特车节 | 全新优惠，全面出击</p>
						<p>
							<span>海淘活动</span><span>14天前</span>
						</p>
					</a>
					</li>
					<li>
					<img src="img/首页_37.jpg"/>
					<a href="">
						<p>海淘模特车节 | 全新优惠，全面出击</p>
						<p>
							<span>海淘活动</span><span>14天前</span>
						</p>
					</a>
					</li>
					<li>
					<img src="img/首页_39.jpg"/>
					<a href="">
						<p>海淘模特车节 | 全新优惠，全面出击</p>
						<p>
							<span>海淘活动</span><span>14天前</span>
						</p>
					</a>
					</li>
					<li>
					<img src="img/首页_41.jpg"/>
					<a href="">
						<p>海淘模特车节 | 全新优惠，全面出击</p>
						<p>
							<span>海淘活动</span><span>14天前</span>
						</p>
					</a>
					</li>
					<li>
					<img src="img/首页_39.jpg"/>
					<a href="">
						<p>海淘模特车节 | 全新优惠，全面出击</p>
						<p>
							<span>海淘活动</span><span>14天前</span>
						</p>
					</a>
					</li>
				</ul>
			</div>
		</div>
			<div class="foot">
				<ul>
					<li><a href="">
						<span class="iconfont">&#xe633;</span>
						<p>首页</p>
					    </a></li>
					    
					<li><a href="">
						<span class="iconfont">&#xe664;</span>
						<p>报名</p>
					    </a></li>
					<li><a href="">
						<span class="iconfont">&#xe6d3;</span>
						<p>驾考圈</p>
					    </a></li>
					<li><a href="">
						<span class="iconfont">&#xe61f;</span>
						<p>我的</p>
					    </a></li>
				</ul>
			</div>
	</body>
</html>
